<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src=" https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js" type="text/javascript"
			charset="utf-8"></script>
		<style type="text/css">
			#nav {
				height: 500px;
				width: 800px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		步骤：
		 1.引入echarts.js文件
		 2.准备一个呈现图表的盒子
		 3.初始化echarts实例对象
		 4.准备配置项
		 5.将配置项设置给echarts实例对象
		 
		 -->
		<div id="nav">

		</div>
		<script type="text/javascript">
			//参数 ,dom 决定图标最终呈现的位置
			//初始化实例对象
			var mCharts = echarts.init(document.getElementById('nav'))
			//准备配置项
			var option = {
				title: { //标题
					text: '成绩展示',
					textStyle: {
						color: 'red'
					}

				},
				//横向坐标我们只要改变x与y的角色就行
				xAxis: { //表示x坐标
					type: 'category', //类目
					data: ['谢应鹏', '李四', '闰土', '小明', '大强', '王五', '李四', '张三']
				},
				yAxis: { //表示y坐标 数据
					type: 'value'
				},
				toolbox: { //所提供的工具栏 有导出图片 动态类型切换  数据区域缩放  重置五个工具
					feature: {
						saveAsImage: {}, //导出图片
						dataView: {}, //数据视图
						restore: {}, //重置的功能
						dataZoom: {}, //区域缩放
						magicType: { //动态类型切换
							type: ['bar', 'line']
						}
					}

				},
				legend:{//标题切换意思 点击哪一个就显示哪一个数据
					data:['语文','数学']
				},
				tooltip: { //鼠标结果显示数据提示
					//触发类型
					/* trigger:'item', */
					trigger: 'axis',
					//两个区别就是上面没有柱 下面有
					//触发事件
					/* triggerOn:'click', */ //表示鼠标点击时发生
					/* triggerOn:'mouserve'//默认鼠标结果 */
					//当鼠标结果时显示的格式

					/* 字符串formatter:'{b}的成绩是{c}' */
					//函数
					formatter: function(arg) {

						return arg[0].name + '的分数是' + arg[0].data
					}
				},

				series: [{ //与x坐标中的data一一对应
						name: '语文',
						type: 'bar', //表示柱状图  line表示折线图 pie饼图
						data: [70, 92, 87, 80, 72, 86, 76, 92],
						label: { //数据显示
							show: false
						},
						barWidth: 30, //柱状图宽度
						markLine: { //求平均值
							data: [{
								type: 'average',
								name: '平均值'
							}]

						},
						markPoint: { //求最大值和最小值
							data: [{
								type: 'max',
								name: '最大值'
							}, {
								type: 'min',
								name: '最小值'
							}]
						}
					},
					{ //与x坐标中的data一一对应
							name: '数学',
							type: 'bar', //表示柱状图  line表示折线图 pie饼图
							data: [70, 92, 87, 80, 72, 86, 76, 92],
							label: { //数据显示
								show: false
							},
							barWidth: 30, //柱状图宽度
							markLine: { //求平均值
								data: [{
									type: 'average',
									name: '平均值'
								}]
					
							},
							markPoint: { //求最大值和最小值
								data: [{
									type: 'max',
									name: '最大值'
								}, {
									type: 'min',
									name: '最小值'
								}]
							}
						},
						
				]
			}
			// 使用刚指定的配置项和数据显示图表。
			mCharts.setOption(option);
		</script>
	</body>
</html>
